<template>
  <v-card>
    <v-card-title>
      <v-btn color="primary" @click="getDataFromServer">刷新</v-btn>
      <!--搜索框，与search属性关联-->
      <v-spacer />
      <v-flex xs3>
        <v-text-field label="输入关键字搜索" v-model.lazy="search" append-icon="search" hide-details />
      </v-flex>
    </v-card-title>
    <v-divider />
    <v-data-table
      :headers="headers"
      :items="Orders"
      :pagination.sync="pagination"
      :total-items="totalBrands"
      :loading="loading"
      class="elevation-1"
    >
      <template slot="items" slot-scope="props">
        <td class="text-xs-center">{{ props.item.id }}</td>
        <td class="text-xs-center">{{ props.item.lsh }}</td>
        <td class="text-xs-center">{{ props.item.truename}}</td>
        <td class="text-xs-center">{{ props.item.storeName}}</td>
        <td class="text-xs-center">{{ props.item.storageName}}</td>
        <td class="text-xs-center">{{ props.item.hh }}</td>
        <td class="text-xs-center">{{ props.item.lxInfo }}</td>
        <td class="text-xs-center">{{ props.item.sl }}</td>
        <td class="text-xs-center">{{ props.item.location }}</td>
        <td class="text-xs-center">{{ props.item.statusInfo }}</td>
        <td class="text-xs-center">{{ props.item.contact}}</td>
        <td class="text-xs-center">{{ props.item.phone }}</td>

        <td class="justify-center layout px-0">
          <v-btn icon v-if="props.item.status===1" @click="editBrand(props.item)">
            <i class="el-icon-edit" />
          </v-btn>
        </td>
      </template>
    </v-data-table>
    <!--弹出的对话框-->
    <v-dialog v-model="show" persistent scrollable>
      <v-card>
        <!--对话框的标题-->
        <v-toolbar dense dark color="primary">
          <v-toolbar-title>订单</v-toolbar-title>
          <v-spacer />
          <!--关闭窗口的按钮-->
          <v-btn icon @click="closeWindow">
            <v-icon>close</v-icon>
          </v-btn>
        </v-toolbar>
        <!--对话框的内容，表单-->
        <v-card-text class="px-5">
          <Order-form @close="closeWindow" :oldOrder="oldOrder" :isEdit="isEdit" />
        </v-card-text>
      </v-card>
    </v-dialog>
  </v-card>
</template>

<script>
// 导入自定义的表单组件
import OrderForm from "./OrderForm";

export default {
  name: "Order",
  data() {
    return {
      search: "", // 搜索过滤字段
      totalBrands: 0, // 总条数
      Orders: [], // 当前页路线数据pagexs
      loading: true, // 是否在加载中
      pagination: {}, // 分页信息
      headers: [
        { text: "id", align: "center", value: "id" },
        { text: "流水号", align: "center", sortable: false, value: "ls" },
        { text: "录入人用户名",align: "center",sortable: false,value: "lrusername"},
        { text: "店铺", align: "center", value: "hh", sortable: true },
        { text: "仓库", align: "center", value: "hh", sortable: true },
        { text: "货号", align: "center", value: "hh", sortable: true },
        { text: "类型", align: "center", value: "lx", sortable: true },
        { text: "数量", align: "center", value: "sl", sortable: true },
        {
          text: "详细地址",
          align: "center",
          value: "location",
          sortable: true
        },
        { text: "单据状态", align: "center", value: "status", sortable: false },
        { text: "联系人", align: "center", value: "contact", sortable: false },
        { text: "手机号", align: "center", value: "phone", sortable: true },
        { text: "操作", align: "center", sortable: false }
      ],
      show: false, // 控制对话框的显示
      oldOrder: {}, // 即将被编辑的路线数据
      isEdit: false // 是否是编辑
    };
  },

  watch: {
    pagination: {
      // 监视pagination属性的变化
      deep: true, // deep为true，会监视pagination的属性及属性中的对象属性变化
      handler() {
        // 变化后的回调函数，这里我们再次调用getDataFromServer即可
        this.getDataFromServer();
      }
    },
    search: {
      // 监视搜索字段
      handler() {
        this.getDataFromServer();
      }
    }
  },
  watch: {
    pagination: {
      // 监视pagination属性的变化
      deep: true, // deep为true，会监视pagination的属性及属性中的对象属性变化
      handler() {
        // 变化后的回调函数，这里我们再次调用getDataFromServer即可
        this.getDataFromServer();
      }
    },
    filter: {
      // 监视搜索字段
      handler() {
        this.getDataFromServer();
      },
      deep: true
    }
  },
  methods: {
    getDataFromServer() {
      // 从服务的加载数的方法。
      // 发起请求
      this.$http
        .get("/item/xsth/pagexs", {
          params: {
            key: this.search, // 搜索条件
            page: this.pagination.page, // 当前页
            rows: this.pagination.rowsPerPage, // 每页大小
            uid: window.localStorage.getItem("id"),
            status:1,
          }
        })
        .then(resp => {
          // 这里使用箭头函数
          this.Orders = resp.data.items;
          this.totalBrands = resp.data.total;
          // 完成赋值后，把加载状态赋值为false
          this.loading = false;
        }).catch(e=>this.loading=false);
    },
    addBrand() {
      // 修改标记
      this.isEdit = false;
      // 控制弹窗可见：
      this.show = true;
      // 把oldBrand变为null
      this.oldOrder = null;
    },
    editBrand(oldOrder) {
      this.$http
        .get("/item/xsth/queryxs?lsh=" + oldOrder.lsh)
        .then(({ data }) => {
          // 修改标记
          this.isEdit = true;
          // 控制弹窗可见：
          this.show = true;
          // 获取要编辑的brand
          this.oldOrder = data;
        });
    },
    closeWindow() {
      // 重新加载数据
      this.getDataFromServer();
      // 关闭窗口
      this.show = false;
    }
  },
  components: {
    OrderForm
  }
};
</script>

<style scoped>
</style>
